<template>
  <div class="record-wrapper">
    <a-card title="推荐记录">
      <a-list v-if="resources.length">
        <a-list-item
          v-for="resource in resources"
          :key="resource.id"
          class="listItem"
          @click="handleClick(resource.id, resource.labels[0].id)"
        >
          <a-list-item-meta :description="resource.description" :title="resource.name">
            <template #avatar>
              <a-avatar :src="resource.icon"></a-avatar>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
      <a-empty v-else description="暂无数据" />
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { findPublishList } from '@/api/user/user';
import { useUserInfoStore } from '@/store';
import { ResourceItem } from '@/types/resource';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const userStore = useUserInfoStore();
const resources = ref<ResourceItem[]>([]);
const router = useRouter();
onMounted(() => {
  if (userStore.userInfo.uid) {
    findPublishList(userStore.userInfo.uid).then((res) => {
      if (res) {
        resources.value = res.data;
      }
    });
  }
});
const handleClick = (id: number, labelId: number) => {
  router.push({ name: 'resourceDetail', query: { id, labelId } });
};
</script>
<style lang="less" scoped>
.record-wrapper {
  margin: 12px;
  min-height: calc(100vh - 136px);
  min-width: calc(100vw - 258px);
  .listItem:hover {
    cursor: pointer;
  }
}
</style>
